<template>
  <div class="history">
    <p>
      <span>历史记录</span>
      <span style="color: red" @click="$store.commit('remove')">全部删除</span>
    </p>
    <div class="his_ct">
      <van-tag v-for="(item,index) in history" :key="index"
        closeable
        size="large"
        type="danger"
        @close="$store.commit('del',index)"
        @click="$emit('search',item)"
      >
      {{item}}
      </van-tag>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const { state } = useStore();
    const data = reactive({
      history: computed(() => state.history),
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
.history {
  padding: 0 10px;
  box-sizing: border-box;
  p {
    display: flex;
    height: 45px;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
  }
  .his_ct{
    .van-tag{
      margin-right: 10px;
    }
  }
}
</style>